<template>
        <div class="home-container">
            <div :class="{ 'tobbar': true, 'fold-other': changeFold.fold ? true : false }">
                <Top></Top>
            </div>
            <div :class="{ 'left-nav': true, 'fold-nav': changeFold.fold ? true : false }">
                <logo></logo>
                <el-menu :default-active="$route.path" :class="{ 'el-menu-vertical-demo': true, }"
                    active-text-color="#ffd04b" text-color="#fff" background-color="#00152b"
                    :collapse="changeFold.fold ? true : false">
                    <Menu :routes="allRoutes"></Menu>
                </el-menu>
            </div>
            <div :class="{ 'content': true, 'fold-other': changeFold.fold ? true : false }">
                <Main></Main>
            </div>
        </div>

</template>

<script setup lang='ts'>
import logo from "@/components/logo/index.vue"
import Menu from '@/views/menu/index.vue'
import { allRoutes } from '@/router/test.ts'
import Top from "@/views/top/index.vue"
import { changeLayout } from "@/stores/modules/changeLayout/index"
import {  ref } from "vue"
import { useRoute } from "vue-router";
import { RouterView } from "vue-router"
import Main from "./transition/index.vue"
//仓库
let changeFold = changeLayout()
let $route = useRoute()

</script>

<style lang="scss" scoped>
.home-container {
    width: 100%;
    height: 100vh;
}

.fold-nav {
    width: 60px !important;
}

.fold-other {
    left: var(--fold-nav-width) !important;
    width: calc(100% - var(--fold-nav-width)) !important;
}

.tobbar {
    width: var(--tobbar-width);
    height: 6vh;
    left: var(--left-nav-width);
    position: absolute;
    border: 1px solid black;
    box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.5);
    transition: all .3s;
}

.left-nav {
    position: absolute;
    top: 0;
    width: var(--left-nav-width);
    height: 100vh;
    background-color: #00152b;
    transition: all 0.3s;
    overflow: hidden;
}

.content {
    position: absolute;
    left: var(--left-nav-width);
    top: 9vh;
    width: var(--content-width);
    height: 90vh;
    transition: all .3s;
    margin-left: 2.5%;
}
</style>